<template>
  <div class="edit-panel">
    <div class="header">
      <el-col
        :style="{ textAlign: 'center' }"
        :span="12"
        @click="currentEdit = 'model'"
      >
        <span>模型列表</span>
      </el-col>
      <el-col
        :style="{ textAlign: 'center' }"
        :span="12"
        @click="currentEdit = 'tag'"
      >
        <span>标签配置</span>
      </el-col>
    </div>
    <!-- 模型列表 -->
    <model-choose v-if="currentEdit === 'model'"></model-choose>
    <!-- 模型配置 -->
    <tag-edit v-if="currentEdit === 'tag'"></tag-edit>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ModelChoose from "@/components/modelEditPanel/ModelChoose.vue";
import TagEdit from "@/components/modelEditPanel/TagEdit.vue";

const currentEdit = ref("model");
</script>

<style lang="scss" scoped>
.edit-panel {
  width: 305px;
  height: calc(100vh - 35px) !important;
  background-color: #1b1c23;
  .header {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: #33343f;
    color: #ccc;
    padding: 0px 10px;
    border-bottom: 1px solid #1b1c23;
    border-top: 1px solid #1b1c23;
    box-sizing: border-box;
  }
}
</style>
<style lang="scss">
.model-choose {
  width: 100%;
  .disabled {
    opacity: 0.3;
    pointer-events: none;
  }
  .options {
    max-width: 380px;
    box-sizing: border-box;
    background-color: #1b1c23;
    .option-active {
      background-color: #27282f;
    }
    .space-between {
      justify-content: space-between;
    }
    .option {
      padding: 0px 18px;
      box-sizing: border-box;
      cursor: pointer;
      color: #ccc;
      display: flex;
      align-items: center;
      height: 33px;
      font-size: 14px;
      .icon-name {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>